// 定义通用样式

$color-green: #0f0;

//定位上下左右居中
@mixin position-c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中
@mixin position-align-c {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位左右居中
@mixin position-justify-c {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

//宽高
@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

// flex布局，水平垂直居中
@mixin flex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}

// flex布局，垂直居中
@mixin flex-align-c {
  display: flex;
  align-items: center;
}

// flex布局，水平居中
@mixin flex-justify-c {
  display: flex;
  justify-content: center;
}

// flex布局，space-between布局
@mixin flex-j-between {
  display: flex;
  justify-content: space-between;
}

// flex布局，space-around布局
@mixin flex-j-around {
  display: flex;
  justify-content: space-around;
}

@mixin bg-image($img-path) {
  background-image: url($img-path);
  background-repeat: no-repeat;
  background-size: 100% 100%; // cover或contain也是可选值
  background-position: center;
}
